<template>
  <div>
    <quill-editor v-model="content" ref="myTextEditor" :options="editorOption" @change="onChange">
      <div :id="id" slot="toolbar">
        <span class="ql-formats"><button type="button" class="ql-bold"></button></span>
        <span class="ql-formats"><button type="button" class="ql-italic"></button></span>
        <span class="ql-formats"><button type="button" class="ql-underline"></button></span>
        <span class="ql-formats"><button type="button" class="ql-strike"></button></span>
        <span class="ql-formats"><button type="button" class="ql-blockquote"></button></span>
        <span class="ql-formats"><button type="button" class="ql-code-block"></button></span>
        <span class="ql-formats"><button type="button" class="ql-header" value="1"></button></span>
        <span class="ql-formats"><button type="button" class="ql-header" value="2"></button></span>
        <span class="ql-formats"><button type="button" class="ql-list" value="ordered"></button></span>
        <span class="ql-formats"><button type="button" class="ql-list" value="bullet"></button></span>
        <span class="ql-formats"><button type="button" class="ql-script" value="sub"></button></span>
        <span class="ql-formats"><button type="button" class="ql-script" value="super"></button></span>
        <span class="ql-formats"><button type="button" class="ql-indent" value="-1"></button></span>
        <span class="ql-formats"><button type="button" class="ql-indent" value="+1"></button></span>
        <span class="ql-formats"> <button type="button" class="ql-direction" value="rtl"></button></span>

        <span class="ql-formats"><select class="ql-size">
            <option value="small"></option>
            <option selected></option>
            <option value="large"></option>
            <option value="huge"></option>
          </select></span>
        <span class="ql-formats"><select class="ql-header">
            <option value="1"></option>
            <option value="2"></option>
            <option value="3"></option>
            <option value="4"></option>
            <option value="5"></option>
            <option value="6"></option>
            <option selected="selected"></option>
          </select></span>
        <span class="ql-formats"><select class="ql-color">
            <option selected="selected"></option>
            <option value="#e60000"></option>
            <option value="#ff9900"></option>
            <option value="#ffff00"></option>
            <option value="#008a00"></option>
            <option value="#0066cc"></option>
            <option value="#9933ff"></option>
            <option value="#ffffff"></option>
            <option value="#facccc"></option>
            <option value="#ffebcc"></option>
            <option value="#ffffcc"></option>
            <option value="#cce8cc"></option>
            <option value="#cce0f5"></option>
            <option value="#ebd6ff"></option>
            <option value="#bbbbbb"></option>
            <option value="#f06666"></option>
            <option value="#ffc266"></option>
            <option value="#ffff66"></option>
            <option value="#66b966"></option>
            <option value="#66a3e0"></option>
            <option value="#c285ff"></option>
            <option value="#888888"></option>
            <option value="#a10000"></option>
            <option value="#b26b00"></option>
            <option value="#b2b200"></option>
            <option value="#006100"></option>
            <option value="#0047b2"></option>
            <option value="#6b24b2"></option>
            <option value="#444444"></option>
            <option value="#5c0000"></option>
            <option value="#663d00"></option>
            <option value="#666600"></option>
            <option value="#003700"></option>
            <option value="#002966"></option>
            <option value="#3d1466"></option>
          </select></span>
        <span class="ql-formats"> <select class="ql-background">
            <option value="#000000"></option>
            <option value="#e60000"></option>
            <option value="#ff9900"></option>
            <option value="#ffff00"></option>
            <option value="#008a00"></option>
            <option value="#0066cc"></option>
            <option value="#9933ff"></option>
            <option selected="selected"></option>
            <option value="#facccc"></option>
            <option value="#ffebcc"></option>
            <option value="#ffffcc"></option>
            <option value="#cce8cc"></option>
            <option value="#cce0f5"></option>
            <option value="#ebd6ff"></option>
            <option value="#bbbbbb"></option>
            <option value="#f06666"></option>
            <option value="#ffc266"></option>
            <option value="#ffff66"></option>
            <option value="#66b966"></option>
            <option value="#66a3e0"></option>
            <option value="#c285ff"></option>
            <option value="#888888"></option>
            <option value="#a10000"></option>
            <option value="#b26b00"></option>
            <option value="#b2b200"></option>
            <option value="#006100"></option>
            <option value="#0047b2"></option>
            <option value="#6b24b2"></option>
            <option value="#444444"></option>
            <option value="#5c0000"></option>
            <option value="#663d00"></option>
            <option value="#666600"></option>
            <option value="#003700"></option>
            <option value="#002966"></option>
            <option value="#3d1466"></option>
          </select></span>
        <span class="ql-formats"><select class="ql-font">
            <option selected="selected"></option>
            <option value="serif"></option>
            <option value="monospace"></option>
          </select></span>
        <span class="ql-formats">
          <select class="ql-align">
            <option selected="selected"></option>
            <option value="center"></option>
            <option value="right"></option>
            <option value="justify"></option>
          </select>
        </span>
        <span class="ql-formats">
          <button type="button" class="ql-clean"></button>
        </span>
        <span class="ql-formats">
          <button type="button" class="ql-link"></button>
        </span>
        <span class="ql-formats">
          <button type="button" @click="imgClick">
            <svg viewBox="0 0 18 18">
              <rect class="ql-stroke" height="10" width="12" x="3" y="4"></rect>
              <circle class="ql-fill" cx="6" cy="7" r="1"></circle>
              <polyline class="ql-even ql-fill" points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"></polyline>
            </svg>
          </button>
        </span>
        <span class="ql-formats">
          <button type="button" class="ql-video"></button>
        </span>
      </div>
    </quill-editor>
    <CropUpload v-model="showCrop" :width="width" :height="height" :fileName="fileName" :uploadUrl="uploadUrl"
      @uploadSuccess="onUploadSuccess"></CropUpload>
  </div>
</template>
<script>
  import {
    quillEditor
  } from 'vue-quill-editor'
  import CropUpload from './components/CropUpload.vue'
  import axios from 'axios'
  import {
    uploadImage
  } from '@/network/mvo/mvo-product-entry'
  export default {
    props: {
      id: {
        type: String
      },
      /*编辑器的内容*/
      value: {
        type: String
      },
      /*上传图片的地址*/
      uploadUrl: {
        type: String
      },
      /*上传图片的file控件name*/
      fileName: {
        type: String
      },
      /*图片大小*/
      maxSize: {
        type: Number,
        default: 400 //kb
      },
      /*使用使用裁切*/
      canCrop: {
        type: Boolean,
        default: false
      },
      /*裁切的最小尺寸*/
      width: {
        type: Number,
        default: 200
      },
      /*裁切的最小尺寸*/
      height: {
        type: Number,
        default: 200
      }
    },
    data() {
      let _this = this
      return {
        content: '',
        editorOption: {
          modules: {
            toolbar: '#' + _this.id
          }
        },
        /*显示裁切控件*/
        showCrop: false
      }
    },
    methods: {
      onChange() {
        this.$emit('input', this.content)
      },
      /*选择上传图片切换，在这个方法中即进行上传操作，上传后将图片渲染回编辑器*/
      onFileChange(e) {
        var fileInput = e.target;
        if (fileInput.files.length == 0) {
          return;
        }
        if (fileInput.files[0].size > 1024 * 1024 * this.maxSize) {
          alert('图片过大');
          return;
        }
        if (!this.uploadUrl) {
          console.log('no editor uploadUrl');
          return;
        }
        var self = this;
        var data = new FormData;
        data.append(this.fileName, fileInput.files[0], name);
        this.editor.focus();

        var imageVO = {
          image: data,
          url: this.uploadUrl
        }
        return new Promise((resolve, reject) => {
          uploadImage(imageVO).then(response => {
            console.log(response)
            if (response.code == 20000) {
              console.log(response)
              self.editor.insertEmbed(self.editor.getSelection().index, 'image', response.data);
            }
          }).catch(error => {
            reject(error);
          })
        })


        // axios.post(this.uploadUrl, {
        //   data: data,
        //   headers: {
        //     Authorization: this.$store.getters.token
        //   }
        // }).then(response => {
        //   console.log(response)
        //   if (response.data.code == 20000) {
        //     console.log(response)
        //     self.editor.insertEmbed(self.editor.getSelection().index, 'image', response.data.data);
        //   }
        // }).catch(function(error) {
        //   console.log(err)
        // })
      },
      /*裁切上传成功 res根据上传接口值获取*/
      onUploadSuccess: function(response) {
        console.log(response)
        this.editor.focus();
        this.editor.insertEmbed(this.editor.getSelection().index, 'image', response.data.data);
      },
      /*点击上传图片按钮*/
      imgClick() {
        if (this.canCrop) {
          this.showCrop = true;
        } else {
          /*创建input file 不裁切，自己控制*/
          var input = document.createElement('input');
          input.type = 'file';
          input.name = this.fileName;
          input.accept = 'image/jpeg,image/png,image/jpg,image/gif';
          input.onchange = this.onFileChange;
          input.click();
        }
      },

    },
    computed: {
      editor() {
        return this.$refs.myTextEditor.quill;
      }
    },
    components: {
      quillEditor,
      CropUpload
    },
    mounted() {
      this.content = this.value;
    },
    watch: {
      'value'(newVal, oldVal) {
        if (this.editor) {
          if (newVal !== this.content) {
            this.content = newVal
          }
        }
      },
    }
  }
</script>
